<template>
  <div
    :class="{
      'app-container extend': !$route.query.linkIframe,
      'no-bg df hp100': hasLeft,
    }"
  >
    <div class="content">
      <template v-if="$slots.left">
        <div class="left extend" :style="leftStyle">
          <slot name="left" />
        </div>
        <div class="center flex-one">
          <slot />
        </div>
      </template>
      <template v-else>
        <slot />
      </template>
    </div>
    <div class="footer">
      <slot name="footer" />
    </div>
  </div>
</template>
<script>
export default {
  name: "AppContainer",
  props: {
    leftWidth: {
      type: [String, Number],
      default: 180,
    },
    gutters: {
      type: [String, Number],
      default: "20px",
    },
  },
  computed: {
    hasLeft() {
      return this.$slots.left;
    },
    leftStyle() {
      return {
        marginRight: this.gutters,
        width: this.leftWidth,
      };
    },
    data() {
      return {};
    },
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  display: flex;
  flex-direction: column;
  &.no-bg {
    background-color: transparent;
    // padding: 0;
  }
  .content {
    padding: 20px;
    flex: 1;
  }
  .center,
  .left {
    background: #fff;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.3rem;
  }
  .footer {
    display: flex;
    padding:10px 0;
    border-top:1px solid #f2f2f2;
    justify-content: flex-end;
  }
}
</style>
